<template>
  <ElColorPicker
    v-model="themeVal"
    :predefine="predefineColors"
    size="mini"
    class="theme-picker"
    popper-class="theme-picker-dropdown" />
</template>

<script>
  import color from '@/mixins/color'
  import { ColorPicker } from 'element-ui'

  export default {
    name: 'TopColor',
    components: {
      ElColorPicker: ColorPicker
    },
    mixins: [color],
    data() {
      return {
        predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']
      }
    }
  }
</script>

<style>
  .theme-picker .el-color-picker__trigger {
    vertical-align: middle;
  }

  .theme-picker-dropdown .el-color-dropdown__link-btn {
    display: none;
  }
</style>
